@(message: String,users : java.util.List[User])
@main(title = message) {
    <!-- BEGIN CONTENT -->
        <div class="page-content-wrapper">
            <div class="page-content">
                <div class="row" style="padding-top: 50px">
                    <div class="col-md-3"></div>
                    <div class="col-md-6">
                        <div class="portlet">
                            <div class="portlet-title">
                                <div class="caption">
                                    <button class="btn btn-outline btn-circle red btn-sm blue addUser" data-toggle="modal" data-target="#addModal"><i class="fa fa-plus"></i> 新增 </button>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <div class="table-scrollable">
                                    <table class="table table-striped table-bordered table-advance table-hover">
                                        <thead>
                                            <tr>
                                                <th>公司名称 </th>
                                                <th class="hidden-xs"> 联系人 </th>
                                                <th> 手机 </th>
                                                <th> </th>
                                            </tr>
                                        </thead>
                                        <tbody id="tableBody">
                                            @if( users != null && users.size >0){
                                                @for(user <- users){
                                                    <tr>
                                                        <td class="highlight">
                                                            <div class="success"></div>
                                                            <a href="javascript:;"> @user.company </a>
                                                        </td>
                                                        <td class="hidden-xs">@user.username </td>
                                                        <td> @user.telephone </td>
                                                        <td>
                                                            <a  class="btn btn-outline btn-circle btn-sm purple updateUser" data-userId="@user.id"><i class="fa fa-edit"></i> 修改</a>
                                                            <a  class="btn btn-outline btn-circle dark btn-sm black removeUser" data-userId="@user.id"><i class="fa fa-trash-o"></i> 删除 </a>
                                                            <a  class="btn btn-outline btn-circle green btn-sm green userInfo" data-userId="@user.id"><i class="fa fa-info"></i> 详情 </a>
                                                        </td>
                                                    </tr>
                                                }
                                            }
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3"></div>
                </div>
            </div>
        </div>
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">新增用户</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" id="addForm">
                        <div class="form-group has-success">
                            <label class="col-sm-3 control-label" for="company">
                                公司名称
                            </label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="company" name="company">
                            </div>
                        </div>
                        <div class="form-group has-success">
                            <label class="col-sm-3 control-label" for="username">
                                用户名称
                            </label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="username" name="username">
                            </div>
                        </div>
                        <div class="form-group has-success">
                            <label class="col-sm-3 control-label" for="telephone">
                                联系方式
                            </label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="telephone" name="telephone">
                            </div>
                        </div>
                        <div class="form-group has-success">
                            <label class="col-sm-3 control-label" for="mail">
                                邮件地址
                            </label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="mail" name="mail">
                            </div>
                        </div>
                        <div class="form-group has-success">
                            <label class="col-sm-3 control-label" for="remark">
                                备注
                            </label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="remark" name="remark">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="saveUserBtn">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">修改用户</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" id="updateForm">
                        <div class="form-group has-success">
                            <div class="col-sm-6">
                                <input type="hidden" class="form-control" id="updateId" name="id">
                            </div>
                        </div>
                        <div class="form-group has-success">
                            <label class="col-sm-3 control-label" for="updateCompany">
                                公司名称
                            </label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="updateCompany" name="company">
                            </div>
                        </div>
                        <div class="form-group has-success">
                            <label class="col-sm-3 control-label" for="updateUsername">
                                用户名称
                            </label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="updateUsername" name="username">
                            </div>
                        </div>
                        <div class="form-group has-success">
                            <label class="col-sm-3 control-label" for="updateTelephone">
                                联系方式
                            </label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="updateTelephone" name="telephone">
                            </div>
                        </div>
                        <div class="form-group has-success">
                            <label class="col-sm-3 control-label" for="updateMail">
                                邮件地址
                            </label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="updateMail" name="mail">
                            </div>
                        </div>
                        <div class="form-group has-success">
                            <label class="col-sm-3 control-label" for="updateRemark">
                                备注
                            </label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="updateRemark" name="remark">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-loading-text="请耐心等待"  id="updateUserBtn">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">用户详情</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" id="infoForm">
                        <div class="form-group has-success">
                            <label class="col-sm-3 control-label" for="infoId">
                               用户ID
                            </label>
                            <div class="col-sm-6"  id="infoId"></div>
                        </div>
                        <div class="form-group has-success">
                            <label class="col-sm-3 control-label" for="infoCompany">
                                公司名称
                            </label>
                            <div class="col-sm-6" id="infoCompany"></div>
                        </div>
                        <div class="form-group has-success">
                            <label class="col-sm-3 control-label" for="infoUsername">
                                用户名称
                            </label>
                            <div class="col-sm-6" id="infoUsername"></div>
                        </div>
                        <div class="form-group has-success">
                            <label class="col-sm-3 control-label" for="infoTelephone">
                                联系方式
                            </label>
                            <div class="col-sm-6"  id="infoTelephone"></div>
                        </div>
                        <div class="form-group has-success">
                            <label class="col-sm-3 control-label" for="infoMail">
                                邮件地址
                            </label>
                            <div class="col-sm-6" id="infoMail"></div>
                        </div>
                        <div class="form-group has-success">
                            <label class="col-sm-3 control-label" for="infoRemark">
                                备注
                            </label>
                            <div class="col-sm-6" id="infoRemark"></div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="updateUserBtn">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div class="modal fade" id="updateWarnModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body" style="background-color: #0c91e5">
                    修改已提交，请耐心等待同步跳转。。。
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div class="modal fade" id="delWarnModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body" style="background-color: #e52a16">
                   删除已提交，请耐心等待异步加载。。。
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div class="modal fade" id="addWarnModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body" style="background-color: #e52a16">
                    新增已提交，请耐心等待同步跳转。。。
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <script>
            $(document).ready(function(){
                $('#addModal').on('show.bs.modal', function () {
                    // 执行一些动作...
                   document.getElementById("addForm").reset()
                })
                $('#updateModal').on('show.bs.modal', function () {
                    // 执行一些动作...
                    document.getElementById("updateForm").reset()
                })
                $('#saveUserBtn').on('click',function () {
                    $('#addWarnModal').modal('show')
                    $.post('/user/add',$('#addForm').serializeArray(),function (data) {
                        //alert(data.msg)
                        if(data.status){
                            location.href="/user/list";
                        }

                    })
                })
                $('#updateUserBtn').on('click',function () {
                    $(this).button('loading').delay(1).queue(function() {
                        $('#updateWarnModal').modal('show')
                        $.post('/user/update',$('#updateForm').serializeArray(),function (data) {
                            if(data.status){
                                location.href="/user/list";
                            }else {
                                $('#updateWarnModal').modal('hide')
                                $(this).button('reset');
                                $(this).dequeue();
                            }

                        })

                    });


                })

                $('#tableBody').on('click','.userInfo',function () {
                    var id = $(this).attr("data-userId")
                    $.get('/user/info/'+id,function (data) {
                        if(data.status){
                            $('#infoModal').modal('show')
                            $("#infoId").text(data.object.id)
                            $("#infoCompany").text(data.object.company)
                            $("#infoMail").text(data.object.mail)
                            $("#infoTelephone").text(data.object.telephone)
                            $("#infoUsername").text(data.object.username)
                            $("#infoRemark").text(data.object.remark)
                        }
                    })
                })

                $('#tableBody').on('click','.updateUser',function () {
                    var id = $(this).attr("data-userId")
                        $.get('/user/info/'+id,function (data) {
                            if(data.status){
                                $('#updateModal').modal('show')
                                $("#updateId").val(data.object.id)
                                $("#updateCompany").val(data.object.company)
                                $("#updateMail").val(data.object.mail)
                                $("#updateTelephone").val(data.object.telephone)
                                $("#updateUsername").val(data.object.username)
                                $("#updateRemark").val(data.object.remark)
                            }
                        })
                })
                $('#tableBody').on('click','.removeUser',function () {
                    var id = $(this).attr("data-userId")
                    if(confirm("用户删除后将不能回复，请确认！")){
                        $('#delWarnModal').modal('show')
                        $.post('/user/del',{'id':id},function (data) {
                            if(data.status){
                                var html='';
                                for(i =0 ;i<data.object.length;i++){
                                     html += '<tr>' +
                                                    '<td class="highlight"> <div class="success"></div><a href="javascript:;">'+data.object[i].company+'</a></td>' +
                                                    '<td class="hidden-xs">' +data.object[i].username+'</td>' +
                                                    '<td> '+data.object[i].telephone+' </td>' +
                                                    '<td>' +
                                                        '<a  class="btn btn-outline btn-circle btn-sm purple updateUser" data-userId="'+data.object[i].id+'"><i class="fa fa-edit"></i> 修改</a>' +
                                                        '<a  class="btn btn-outline btn-circle dark btn-sm black removeUser" data-userId="'+data.object[i].id+'"><i class="fa fa-trash-o"></i> 删除 </a>' +
                                                        '<a  class="btn btn-outline btn-circle green btn-sm green userInfo" data-userId="'+data.object[i].id+'"><i class="fa fa-info"></i> 详情 </a>' +
                                                    '</td>' +
                                                '</tr>'
                                }
                                $("#tableBody").html(html)
                            }
                            $('#delWarnModal').modal('hide')
                        })
                    }
                })


            });
    </script>

}
